/**
 * Created by penn on 2016/12/21.
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View,
    FlatList,
    RefreshControl,
    DeviceEventEmitter,
    TouchableOpacity
} from 'react-native';
import NavigationBar from '../common/NavigationBar';
import LanguageDao, {FLAG_LANGUAGE} from '../expand/dao/LanguageDao'
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view'

export default class PopularPage extends Component {
    constructor(props) {
        super(props);
        this.languageDao = new LanguageDao(FLAG_LANGUAGE.flag_key);
        this.state = {
            languages: [],
        }
        this.loadLanguage();
    }


    loadLanguage(){
        this.languageDao.fetch().then((languages)=> {
            if (languages) {
                this.setState({
                    languages: languages,
                });
            }
        }).catch((error)=> {

        });
    }

    

    render() {

       let navigationBar= <NavigationBar 
        title={'最热'}
        statusBar={{backgroundColor='#11FD7F'}}
        />;
        let content=this.state.languages.length>0?
        
        
        <ScrollableTabView
        tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}
        tabBarInactiveTextColor='mintcream'
        tabBarActiveTextColor='white'
        ref="scrollableTabView"
        tabBarBackgroundColor="#2196F3"
        initialPage={1}
        renderTabBar={() => <ScrollableTabBar style={{height: 40, borderWidth: 0, elevation: 2}}
                                              tabStyle={{height: 39}}/>}
    >
        {this.state.languages.map((reuslt, i, arr)=> {
            let language = arr[i];
            return language.checked ? <PopularTab key={i} tabLabel={language.name} {...this.props}/> : null;
        })}
    </ScrollableTabView>

        
        
        :null;

        return <View style={styles.container}>
        {navigationBar}
        {content}
    </View>
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,

    },
    tips: {
        fontSize: 20
    }
})
